﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    <link type="image/x-icon" href="../../favicon.ico" rel="icon">
    
    <link rel="stylesheet" type="text/css" href="../../Scripts/component/resources/css/ext-all.css" />
    <script type="text/javascript" src="../../Scripts/component/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../Scripts/component/ext-all.js"></script>
    <script type="text/javascript" src="../../Scripts/cookie.js"></script>
    <script type="text/javascript" src="../../Scripts/extends/Ext.ux.JSLoader.js"></script>
    
    <script language="javascript" type="text/javascript">

        var gpslang = getCookie("gpslang") == null ? "vi" : getCookie("gpslang");
        setCookie("gpslang", gpslang, 365);

        if (gpslang == "vi") {
            jswrite("../../Scripts/resource/res_vi.js?v=1.3.1.22");
        }
        else if (gpslang == "en-US") {
            jswrite("../../Scripts/resource/res_en_us.js?v=1.3.1.22");
        }
        else if (gpslang == "zh-CN") {
            jswrite("../../Scripts/resource/res_zh_cn.js?v=1.3.1.22");
        }

        function login() {
            
        }
        

        Ext.onReady(function () {

            //create login image 
            var logoimage = new Ext.BoxComponent({
                id: 'imglogo',
                xtype: 'box',
                width: 300,
                height: 40,
                style: '',
                autoEl: {
                    tag: 'img',
                    src: 'Content/images/tracker-system.png'
                }
            });

            var logoimageinfo = new Ext.BoxComponent({
                id: 'imglogoinfo',
                xtype: 'box',
                width: 300,
                height: 40,
                style: '',
                autoEl: {
                    tag: 'img',
                    src: 'Content/images/tracker-system.png'
                }
            });

            var logoimageforgetpass = new Ext.BoxComponent({
                id: 'logoimageforgetpass',
                xtype: 'box',
                width: 300,
                height: 40,
                style: '',
                autoEl: {
                    tag: 'img',
                    src: 'Content/images/tracker-system.png'
                }
            });

            //to create username label and input textbox
            var username = new Ext.form.TextField({
                value: '',
                fieldLabel: _Login_lblUserName,
                labelStyle: 'padding-top:6px;padding-left:40px;width:90px;text-align: left',
                width: 120,                
                listeners: {
                    'specialkey': function (txt, ev) {
                        if (ev.getKey() == ev.ENTER) {
                            query();
                        }
                    }
                }
            });

            //to create password label and input textbox
            var pwd = new Ext.form.TextField({
                value: '',
                fieldLabel: _Login_lblPassword,
                labelStyle: 'padding-top:6px;padding-left:40px;width:90px;text-align: left',
                width: 120,
                inputType: 'password',
                listeners: {
                    'specialkey': function (txt, ev) {
                        if (ev.getKey() == ev.ENTER) {
                            query();
                        }
                    }
                }

            });
            var usernameforgetpass = new Ext.form.TextField({                
                fieldLabel: _Login_lblUserName,
                labelStyle: 'padding-top:6px;padding-left:40px;width:90px;text-align: left',
                width: 120,
                listeners: {
                    'specialkey': function (txt, ev) {
                        if (ev.getKey() == ev.ENTER) {
                            recoverPassword();
                        }
                    }
                }
            });

           

            //to create login button
            var butlogin = new Ext.Button({
                id: 'butlogin',
                text: _Login_butLogin,
                style: 'margin-right:16px',
                width: 80,
                handler: function () {
                    query();
                }
            });

            //to create reset button
            var bugreset = new Ext.Button({
                id: 'butreset',
                text: _Login_butReset,
                handler: function () {
                    username.setValue("");
                    pwd.setValue("");
                }
            });

            var butrecoverpassowrd = new Ext.Button({
                text: _Login_ForgetMyPassword,
                handler: function () {
                    recoverPassword();
                }
            });


            //to create AJAX message callback panel
            var msgpanel = new Ext.Panel({
                id: 'msg',
                bodyStyle: 'margin-top:10px;font-size:12px;text-align:right;padding-right:10px;color:red',
                height: 60,
                border: false
            });


            //to create AJAX message callback panel
            var msgpanelforgot = new Ext.Panel({
                id: 'msgforgot',
                bodyStyle: 'margin-top:10px;font-size:12px;text-align:right;padding-right:10px;color:red',
                height: 60,
                border: false
            });

            //create a panel to put the buttons
            var panelButton = new Ext.Panel({
                layout: 'table',
                border: false,
                bodyStyle: 'padding-top:5px;padding-left:134px',
                layoutConfig: { columns: 2 },
                items: [butlogin]
            });

            //create a panel to put the buttons
            var panelButtonForgetpass = new Ext.Panel({
                layout: 'table',
                border: false,
                bodyStyle: 'padding-top:5px;padding-left:134px',
                layoutConfig: { columns: 1 },
                items: [butrecoverpassowrd]
            });

            //create a panel to put all input
            var panelInfo = new Ext.Panel({
                id: 'infopanel',
                width: 300,
                height: 256,
                bodyStyle: 'padding-top:20px',
                border: false,
                layout: 'form',
                items: [username, pwd, panelButton, msgpanel]
            });


            //create panel login    
            var panellogin = new Ext.Panel({
                width: 300,
                height: 200,
                title: _Login_LoginStr,
                //renderTo: 'login',
                bodyStyle: 'padding-top:0px',
                border: false,
                //layout : 'table',
                //layoutConfig:{columns:2},
                labelAlign: 'right',
                items: [logoimage, panelInfo]

            });

            //create a panel to put all input
            var panelforgetpasspanel = new Ext.Panel({
                id: 'panelforgetpasspanel',
                width: 300,
                height: 256,
                bodyStyle: 'padding-top:20px',
                border: false,
                layout: 'form',
                items: [usernameforgetpass, panelButtonForgetpass, msgpanelforgot]
            });

            //create panel forget pass    
            var panelforgetpass = new Ext.Panel({
                width: 300,
                height: 200,
                title: _ForgotPass_Title,
                //renderTo: 'login',
                bodyStyle: 'padding-top:0px',
                border: false,
                //layout : 'table',
                //layoutConfig:{columns:2},
                labelAlign: 'right',
                items: [logoimageforgetpass, panelforgetpasspanel]

            });

            var companyInfoText = _CompanyInfo_Info;

            var companyInfoPanelText = new Ext.Panel({
                width: 300,
                height: 150,
                border: false,
                bodyStyle: 'font-size:12px;text-align:left;padding-left:10px;font-family:tahoma',
                html: companyInfoText
            });

            //Company Info  
            var panelcompanyinfo = new Ext.Panel({
                width: 300,
                height: 200,
                title: _CompanyInfo_Title,
                //renderTo: 'login',
                bodyStyle: 'padding-top:0px',
                border: false,
                //layout : 'table',
                //layoutConfig:{columns:2},
                labelAlign: 'right',
                items: [logoimageinfo, companyInfoPanelText]
            });

            var companyInfo = '';

            var companyInfoPanel = new Ext.Panel({
                width: 300,
                height: 110,
                border: false,
                bodyStyle: 'font-size:12px;text-align:left;padding-left:10px',
                html: companyInfo
            });

            var panelinfotab2 = new Ext.TabPanel({
                id: 'panelinfotab',
                split: true,
                height: 215,
                activeTab: 0,
                items: [panellogin, panelforgetpass, panelcompanyinfo]
            });

            var panelcontainer = new Ext.Panel({
                width: 300,
                //height: 256,
                border: true,
                //layout: 'fit',
                renderTo: 'login',
                items: [panelinfotab2]
            });



            if (companyInfo.length > 0) {
                panelcontainer.add(companyInfoPanel);
                panelcontainer.doLayout();
            }

            username.focus(true);

            //get time zone
            function gettimezone() {
                var now = new Date();
                return now.getTimezoneOffset();
            }

            function msgEmailSent() {
                Ext.MessageBox.buttonText.ok = _TrackerMain_OK;
                Ext.Msg.show({
                    title: _TrackerMain_Title,
                    msg: _Login_EmailWithPasswordSent,
                    buttons: Ext.Msg.OK,
                    animEl: 'elId',
                    icon: Ext.MessageBox.INFO
                });
            }

            function recoverPassword() {
                Ext.MessageBox.show({
                    msg: _TrackerMain_Loading,
                    progressText: _TrackerMain_Loading,
                    width: 300,
                    wait: true,
                    waitConfig: { interval: 200 },
                    icon: Ext.MessageBox.INFO
                });
                var obj = panelforgetpasspanel.findById('msgforgot');
                var name = usernameforgetpass.getValue();
                if (name.trim().length <= 0) {
                    obj.body.update(_Login_UserNameEmpty);
                    obj.body.show();
                    window.setTimeout(function () {
                        obj.body.setDisplayed("none");
                    }, 1000);
                    return;
                }
                else {
                    Ext.Ajax.request({
                        url: 'servicesandhandler/HandlerRecoverPassword.ashx',
                        method: 'post',
                        params: {
                            username: name
                        },
                        success: function (btn) {

                            Ext.MessageBox.hide();
                            usernameforgetpass.setValue('');

                            var val = btn.responseText;
                            if (val == 0) {
                                obj.body.update(_Login_InvalidUserName);
                                obj.body.show();
                                window.setTimeout(function () {
                                    obj.body.setDisplayed("none");
                                }, 2000);
                            }
                            else if (val == 100) {
                                obj.body.update(_Login_NoEmail);
                                obj.body.show();
                                window.setTimeout(function () {
                                    obj.body.setDisplayed("none");
                                }, 2000);
                            }
                            else if (val == 200) {
                                obj.body.update(_Login_EmailWithCannotPasswordSent);
                                obj.body.show();
                                window.setTimeout(function () {
                                    obj.body.setDisplayed("none");
                                }, 2000);
                            }
                            else {
                                obj.body.update(_Login_EmailWithPasswordSent);
                                obj.body.show();
                                window.setTimeout(function () {
                                    obj.body.setDisplayed("none");
                                }, 2000);
                                msgEmailSent();
                            }

                        }
                    });
                }
            }
            function query() {
                var obj = panellogin.findById('msg');
                var name = username.getValue();
                var password = pwd.getValue();
                var tt = getCookie("gpstimezone");
                var timezone;
                if (tt != null)
                    timezone = parseInt(tt);
                else
                    timezone = -gettimezone();
                if (name.trim().length <= 0 || password.trim().length <= 0) {
                    obj.body.update(_Login_UserNamePasswordEmpty);
                    obj.body.show();
                    window.setTimeout(function () {
                        obj.body.setDisplayed("none");
                    }, 1000);
                    return;
                }
                Ext.MessageBox.show({
                    msg: _TrackerMain_Loading,
                    progressText: _TrackerMain_Loading,
                    width: 300,
                    wait: true,
                    waitConfig: { interval: 200 },
                    icon: Ext.MessageBox.INFO
                });
                Ext.Ajax.request({
                    url: '/Login/login',
                    method: 'post',
                    params: {
                        userName: name,
                        passWord: password,
                        timeZone: timezone
                    },
                    success: function (btn) {
                        var val = btn.responseText;
                        if (val == 0) {
                            obj.body.update(_Login_UserNamePasswordWrong);
                            obj.body.show();
                            window.setTimeout(function () {
                                obj.body.setDisplayed("none");
                            }, 1000);
                        }
                        else if (val == 1) {
                            obj.body.update(_Login_AccountExpired);
                            obj.body.show();
                            window.setTimeout(function () {
                                obj.body.setDisplayed("none");
                            }, 1000);
                        }
                        else if (val == 2) {
                            obj.body.update(_Login_AccountWillExpired);
                            obj.body.show();
                            window.setTimeout(function () {
                                window.location.href = 'index.aspx';
                            }, 2000);
                        }
                        else if (val == 3) {
                            obj.body.update(_Login_AccountStatusDisable);
                            obj.body.show();
                            window.setTimeout(function () {
                                obj.body.setDisplayed("none");
                            }, 1000);
                        }
                        else if (val == 4) {
                            obj.body.update(_Login_AccountLocked);
                            obj.body.show();
                            window.setTimeout(function () {
                                obj.body.setDisplayed("none");
                            }, 1000);
                        }
                        else if (val == "index.aspx") {
                            window.location.href = val;
                        }else if(val == 5){
							window.location.href = 'Home'
						}
                        Ext.MessageBox.hide();
                    },
                    failure: function () {
                        Ext.MessageBox.hide();
                    }
                });

            }

           
           
            function loginPageLoadSkin() {
                var skin = getCookie("gpsskin");
                if (skin == null || skin == "blue") {
                    // This is default themes
                }
                else if (skin == "indigo")
                    Ext.util.CSS.swapStyleSheet("theme", "../../Scripts/component/resources/css/xtheme-indigo.css");
                else if (skin == "black")
                    Ext.util.CSS.swapStyleSheet("theme", "../../Scripts/component/resources/css/xtheme-darkgray.css");
                else if (skin == "olive")
                    Ext.util.CSS.swapStyleSheet("theme", "../../Scripts/component/resources/css/xtheme-olive.css");
            }

            function loginPageLoadLang() {


            }

            loginPageLoadSkin();
            loginPageLoadLang();
            window.document.title = _Login_butLogin;
        });
    </script>
</head>
<body>
    <div>
     <form id="Form1" name="form1" runat="server">
        <div id="login" style="position: absolute; top: 30%; left: 35%;">
        </div>
    </form>
    </div>
</body>
</html>
